﻿<div id="grid"></div>
<div id="dlgAdd" style="display:none;padding-left:60px;">
    <form id="formAdd"></form>
</div>
<div id="dlgUpdate" style="display:none;padding-left:60px;">
    <form id="formUpdate"></form>
</div>
<div id="dlgSetRole" style="display:none;">
    <div id="gridRoles"></div>
</div>
<div id="dlgChangePassword" style="display:none;">
    <form id="formChangePassword"></form>
</div>

<script type="text/javascript">
    var _window = {};
    _window.g = {
        OK: '确定',
        CANCEL: '取消',
        NAME: 'User'
    };

    _window.click = function (item) {
        var m = _window[item.method];
        if (m) m();
    }

    _window.options = {
        /*grid*/
        title: '用户信息',
        columns: [
            /* 表格字段 */
            { display: '', name: 'Id', align: 'left', hide: true },
            { display: '用户名', name: 'LoginName', align: 'left', width: 150, minwidth: 120 },
            { display: '姓名', name: 'UserName', align: 'left', width: 150, minwidth: 120 },
            { display: '性别', name: 'Sex', align: 'left', width: 120, minwidth: 80 },
            { display: '工作邮箱', name: 'WorkEmail', align: 'left', width: 180, minwidth: 120 },
            { display: '移动电话', name: 'Mobile', align: 'left', width: 150, minwidth: 120 },
            { display: '固定电话', name: 'Tel', align: 'left', width: 150, minwidth: 120 }
        ],
        toolbar: [
            { method: 'add', text: '增加', click: _window.click, icon: 'add' }
            , { line: true }
            , { method: 'update', text: '修改资料', click: _window.click, icon: 'modify' }
            , { line: true }
            , { method: 'delete1', text: '删除', click: _window.click, icon: 'delete' }
            , { line: true }
            , { method: 'setrole', text: '分配角色', click: _window.click, icon: 'role' }
            , { line: true }
            , { method: 'changepassword', text: '修改密码', click: _window.click, icon: 'modify' }
        ],

        roleColumns: [
            { diaplay: '', name: 'id', hide: true }
            , { display: '', name: 'checked', hide: true }
            , { display: '角色名称', name: 'name', width: 350 }
        ],

        /*dialog*/
        titleAdd: '添加',
        titleUpdate: '修改',
        titleSetRole: '分配角色',
        dlgWidth: 420,
        dlgHeight: 340,

        /*form*/
        addFields: [
            /* 表单字段 */
            { display: '用户名', name: 'LoginName', newline: true, type: 'text', group: '登录信息', validate: { required: true } },
            { display: '密码', name: 'Password', newline: true, type: 'password', validate: { required: true } },
            { display: '姓名', name: 'UserName', newline: true, type: 'text', group: '个人信息', validate: { required: true } },
            { display: "性别 ", name: "Sex", newline: true, type: "select", comboboxName: 'cboSex', validate: { required: true }, options: { valueField: "text", data: [{ text: '男' }, { text: '女' }] } },
            { display: '工作邮箱', name: 'WorkEmail', newline: true, type: 'text', validate: { required: true, email: true } },
            { display: '移动电话', name: 'Mobile', newline: true, type: 'text', validate: { required: true } },
            { display: '固定电话', name: 'Tel', newline: true, type: 'text' }
        ],
        updateFields: [
            /* 表单字段 */
            { name: 'Id', type: 'hidden' },
            { display: '用户名', name: 'LoginName', options: { readonly: true }, newline: true, type: 'text', group: '登录信息', validate: { required: true } },
            { display: '姓名', name: 'UserName', newline: true, type: 'text', group: '个人信息', validate: { required: true } },
            { display: "性别 ", name: "Sex", newline: true, type: "select", comboboxName: 'cboSex2', validate: { required: true }, options: { valueField: "text", data: [{ text: '男' }, { text: '女' }] } },
            { display: '工作邮箱', name: 'WorkEmail', newline: true, type: 'text', validate: { required: true, email: true } },
            { display: '移动电话', name: 'Mobile', newline: true, type: 'text', validate: { required: true } },
            { display: '固定电话', name: 'Tel', newline: true, type: 'text' }
        ],
        inputWidth: 170,
        labelWidth: 90,
        space: 40,
        addPrefixID: 'formAdd_',
        updatePrefixID: 'formUpdate_',

        updateQuestion: '请先选择需要修改的行',
        deleteQuestion: '请先选择需要删除的行',
        deleteConfirm: '是否删除当前选择项？'
    };

    _window.control = {
        grid: null,
        dlgAdd: null,
        dlgUpdate: null,
        formAdd: null,
        formUpdate: null
    };

    _window.getAddControl = function (id) {
        return liger.get(this.options.addPrefixID + id);
    }

    _window.getUpdateControl = function (id) {
        return liger.get(this.options.updatePrefixID + id);
    }

    _window.load = function (g, url, d) {
        var complete = false;
        $.post(url, d, function (data) {
            complete = true;
            if (data.code) {
                $.ligerDialog.error('加载失败, 原因: ' + data.msg);
            }
            else {
                g.loadData(data);
            }
            g.gridloading.hide(100);
        }, 'json');

        var n = setInterval(function () {
            clearInterval(n);
            if (!complete) {
                g.gridloading.show();
            }
        }, 100);
    }

    _window.init = function () {
        $.metadata.setType("attr", "validate");
        this.form();
        this.grid();
    }

    _window.form = function (name) {
        if (name) return _window.control[name];

        _window.control.formAdd = $('#formAdd').ligerForm({
            prefixID: _window.options.addPrefixID,
            inputWidth: _window.options.inputWidth,
            labelWidth: _window.options.labelWidth,
            space: _window.options.space,
            fields: _window.options.addFields,
            validate: {}
        });

        _window.control.formUpdate = $('#formUpdate').ligerForm({
            prefixID: _window.options.updatePrefixID,
            inputWidth: _window.options.inputWidth,
            labelWidth: _window.options.labelWidth,
            space: _window.options.space,
            fields: _window.options.updateFields,
            validate: {}
        });

        _window.control.formChangePassword = $('#formChangePassword').ligerForm({
            prefixID: 'formChangePassword_',
            inputWidth: _window.options.inputWidth,
            labelWidth: _window.options.labelWidth,
            space: _window.options.space,
            fields: [{ display: '密码', name: 'Password', newline: true, type: 'password', validate: { required: true } }],
            validate: {}
        });
    }

    _window.dialog = function (name, row) {
        var id = 'dlg' + name;
        if (this.control[id]) {
            this.control[id].show();
        }
        else {
            this.control[id] = $.ligerDialog.open({
                target: $('#' + id),
                width: this.options.dlgWidth,
                height: this.options.dlgHeight,
                title: this.options["title" + name],
                isResize: true,
                modal: true,
                buttons: [
                    {
                        text: _window.g.OK, onclick: function () {
                            var m = _window['On' + name];
                            if (m) m(_window.control[id].row);
                        }
                    },
                    {
                        text: _window.g.CANCEL, onclick: function () {
                            _window.control[id].hide();
                        }
                    }
                ]
            });
        }

        _window.control[id].row = row || null;
        var event = _window['On' + name + 'Show'];
        if (event)
            event(row);
    }

    _window.grid = function () {
        if (this.control.grid)
            return this.control.grid;

        this.control.grid = $('#grid').ligerGrid({
            title: this.options.title,
            columns: this.options.columns,
            toolbar: { items: this.options.toolbar },
            rownumbers: true,
            resizable: false,
            frozen: false,
            dataAction: 'local'
        });

        return this.control.grid;
    }

    _window.add = function () {
        _window.dialog('Add');
    }

    _window.update = function () {
        DoAction(
            _window.control.grid,
            function (row) {
                _window.dialog('Update', row);
            },
            _window.options.updateQuestion);
    }

    _window.delete1 = function () {
        DoActionConfirm(
            _window.control.grid,
            _window.OnDelete,
            _window.options.deleteQuestion,
            _window.options.deleteConfirm);
    }

    _window.setrole = function () {
        DoAction(
            _window.control.grid,
            function (row) {
                _window.dialog('SetRole', row);
            },
            _window.options.updateQuestion);
    }

    _window.changepassword = function () {
        DoAction(
            _window.control.grid,
            function (row) {
                _window.dialog('ChangePassword', row);
            },
            _window.options.updateQuestion);
    }

    /* TODO: 补充代码, this != _window */
    _window.OnAdd = function () {
        if (_window.control.formAdd.valid()) {
            $.post('/API/User/Create', _window.control.formAdd.getData(), function (data) {
                if (data.code == 0) {
                    $.ligerDialog.success('添加成功', '提示');
                    _window.load(_window.control.grid, '/API/User/Query', {});
                    _window.control.dlgAdd.hide();
                } else {
                    $.ligerDialog.error(data.msg, '错误');
                }
            }, 'json');
        } else {
            _window.control.formAdd.showInvalid()
        }
    }

    _window.OnUpdate = function () {
        if (_window.control.formUpdate.valid()) {
            $.post('/API/User/Update', _window.control.formUpdate.getData(), function (data) {
                if (data.code == 0) {
                    $.ligerDialog.success('修改成功', '提示');
                    _window.load(_window.control.grid, '/API/User/Query', {});
                    _window.control.dlgUpdate.hide();
                } else {
                    $.ligerDialog.error(data.msg, '错误');
                }
            }, 'json');
        } else {
            _window.control.formUpdate.showInvalid()
        }
    }

    _window.OnUpdateShow = function (row) {
        _window.control.formUpdate.setData(row);
    }

    _window.OnDelete = function (row) {
        $.post('/API/User/Delete', { Id: row.Id, LoginName: row.LoginName },
            function (data) {
                if (data.code == 0) {
                    $.ligerDialog.success('删除成功', '提示');
                    _window.load(_window.control.grid, '/API/User/Query', {});
                } else {
                    $.ligerDialog.error(data.msg, '错误');
                }
            }, 'json');
    }

    _window.OnSetRole = function () {
        var row = _window.control.dlgSetRole.row;
        var roles = [];
        var data = _window.control.gridRoles.getSelectedRows();
        if (data) {
            $.each(data, function (i, n) {
                roles.push(n.id);
            });
        }

        $.post('/API/User/SetUserRole', {
            user: row.Id,
            roles: liger.toJSON(roles)
        }, function (data) {
            if (data.code == 0) {
                $.ligerDialog.success('分配成功', '提示');
                _window.control.dlgSetRole.hide();
            } else {
                $.ligerDialog.error(data.msg, '错误');
            }
        }, 'json');
    }

    _window.OnSetRoleShow = function (row) {
        if (!_window.control.gridRoles) {
            _window.control.gridRoles = $('#gridRoles').ligerGrid({
                columns: _window.options.roleColumns,
                isChecked: function (r) {
                    return r.checked;
                },
                usePager: false,
                resizable: false,
                frozen: false,
                checkbox: true
            });
        }

        _window.load(_window.control.gridRoles, '/API/User/GetUserRole', row);
    }

    _window.OnChangePassword = function (row) {
        if (_window.control.formChangePassword.valid()) {
            var p = _window.control.formChangePassword.getData();
            $.post('/API/User/ChangePassword', {
                id: row.Id,
                password: p.Password
            }, function (data) {
                if (data.code == 0) {
                    $.ligerDialog.success('修改成功', '提示');
                    _window.control.dlgChangePassword.hide();
                } else {
                    $.ligerDialog.error(data.msg, '错误');
                }
            }, 'json');
        } else {
            _window.control.formChangePassword.showInvalid()
        }
    }

    $(document).ready(function () {
        _window.init();
        _window.load(_window.control.grid, '/API/User/Query', {});
    });
</script>